<template>
  <div class="btn_content">
    <!--<el-button :type="item.type?item.type:''"-->
    <!--v-for="(item,index) in buttonList" :key="index" size="mini"-->
    <!--@click="handleClick(item)"-->
    <!--&gt;{{item.name}}</el-button>-->

    <span v-for="(item, index) in buttonList">
      <!--附件上传-->
      <span v-if="item.btnType == 'upload'">
        <el-upload
          style="display: inline-block"
          action=""
          :multiple="false"
          :accept="item.accept ? item.accept : '.xlsx'"
          :http-request="
            (file) => {
              uploadFn(file, item);
            }
          "
          :show-file-list="false"
        >
          <el-button
            size="mini"
            :type="item.type ? item.type : ''"
            :key="index"
            v-hasPermission="item.hasPremission||''"
            >{{ item.name }}</el-button
          >
        </el-upload>
      </span>
      <!--普通按钮-->
      <span v-else>
        <el-button
          :type="item.type ? item.type : ''"
          :key="index"
          size="mini"
          v-hasPermission="item.hasPremission||''"
          @click="handleClick(item)"
          >{{ item.name }}</el-button
        >
      </span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    buttonList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    uploadFn(file, item) {
      this.$emit("clickButton", item.methods, file.file);
    },
    handleClick(item) {
      this.$emit("clickButton", item.methods);
    },
  },
};
</script>

<style lang="scss" scoped>
.btn_content {
  margin-bottom: 20px;
}
</style>
